/********************************************************************************
 *@description: 常见问题管理 问题内容
 *@author: Xhd
 *@API: qingyue
 *@Product: 尹乐恺
 *@date: 2024-05-07 09:00:43
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import { Modal, Switch, } from 'antd';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import TheButton from '@/components/TheButton';
import { apiGetQuestionContentPage, apiGetQuestionContentDeactivated, apiGetQuestionContentOpen, apiGetQuestionContentDelete } from "@/request/app/questions";

class QuestionsContent extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columns: [
        {
          title: "类型名称",
          dataIndex: "typeName",
          key: "typeName",
        },
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "最后一次修改时间",
          dataIndex: "updateTime",
          key: "updateTime",
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
        },
        {
          title: "阅读量",
          dataIndex: "readingVolume",
          key: "readingVolume",
        },
        {
          title: "状态",
          dataIndex: "state",
          key: "state",
          render: (text, record) => {
            return <>
              <Switch checked={parseInt(text) === 0 ? false : true} onClick={(value) => this.stateChange(value, record)} />
            </>
          }
        },
        {
          title: "操作",
          dataIndex: "operate",
          key: "operate",
          render: (text, record) => {
            return <>
              <TheButton haspermi={['questions:content:view']} onClick={() => this.createOrEdit("view", record.contentId)} >详情</TheButton>
              <TheButton haspermi={['questions:content:edit']} onClick={() => this.createOrEdit("edit", record.contentId)} >编辑</TheButton>
              <TheButton haspermi={['questions:content:erase']} onClick={() => this.erase(record)} >删除</TheButton>
            </>
          }
        },
      ],
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      queryForm: {},
      searchOption: [
        {
          field: 'typeName',
          label: '类型名称',
          placeholder: '请输入',
          required: false,
          rules: [],
          type: 'Input',
          defaultValue: ''
        },
        {
          field: 'title',
          label: '标题',
          placeholder: '请输入',
          required: false,
          rules: [],
          type: 'Input',
          defaultValue: ''
        },
      ],
    }
  }

  componentDidMount() {
    this.getListData()
  }

  getListData = async (values) => {
    const { pageData } = this.state
    const api = apiGetQuestionContentPage
    await api({ ...pageData, ...values }).then(res => {
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount
        })
      }
    })
  }

  // 查询
  onFormSearch = (values) => {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.setState({
        queryForm: { ...values }
      })
      this.getListData(values)
    })
  }
  // 重置
  onReset = () => {
    this.setState({
      queryForm: {},
    }, () => {
      this.pageChange(1, 10)
    })
  }
  // 分页
  pageChange = (pageNo, pageSize) => {
    const { queryForm } = this.state
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getListData(queryForm)
    })
  }
  // 启用/停用
  stateChange = (value, record) => {
    const { pageData: { pageNo, pageSize } } = this.state
    if (value) {
      React.$confirm({
        title: "温馨提示",
        content: "启用后，关联类型是开启状态，将展示该内容",
        onOk: async () => {
          let res = await apiGetQuestionContentOpen({ contentId: record.contentId, typeId: record.typeId })
          if (res.code === 0) {
            if (res.data.code) {
              React.$message({
                type: 'success',
                content: '操作成功'
              })
              this.pageChange(pageNo, pageSize)
            } else {
              React.$confirm({
                title: "温馨提示",
                content: res.data.message,
                onOk: () => { }
              })
            }
          }
        }
      })
    } else {
      React.$confirm({
        title: "温馨提示",
        content: "停用后，APP端不再展示该内容",
        onOk: async () => {
          let res = await apiGetQuestionContentDeactivated({ contentId: record.contentId, typeId: record.typeId })
          if (res.code === 0) {
            if (res.data.code) {
              React.$message({
                type: 'success',
                content: '操作成功'
              })
              this.pageChange(pageNo, pageSize)
            } else {
              React.$confirm({
                title: "温馨提示",
                content: res.data.message,
                onOk: async () => {
                  let res = await apiGetQuestionContentDeactivated({ contentId: record.contentId, typeId: record.typeId, yesFlag: 1 })
                  if (res.code === 0) {
                    React.$message({
                      type: 'success',
                      content: '操作成功'
                    })
                    this.pageChange(pageNo, pageSize)
                  }
                }
              })
            }
          }
        }
      })
    }
  }
  // 新增/编辑/详情
  createOrEdit = (type, id) => {
    this.props.history.push(`/questions/questionsContent/${type}/${id}`)
  }
  //删除
  erase = async (record) => {
    const { dataSource, pageData: { pageNo, pageSize } } = this.state
    React.$confirm({
      title: "警告",
      content: "删除后，APP及管理端将无法查看",
      onOk: async () => {
        let res = await apiGetQuestionContentDelete({ contentId: record.contentId, typeId: record.typeId })
        if (res.code === 0) {
          if (res.data.code) {
            React.$message({
              type: 'success',
              content: '删除成功'
            })
            if (dataSource.length === 1 && pageNo !== 1) { this.pageChange(pageNo - 1, pageSize) } else {
              this.pageChange(pageNo, pageSize)
            }
          } else {
            React.$confirm({
              title: "温馨提示",
              content: res.data.message,
              onOk: async () => {
                let res = await apiGetQuestionContentDelete({ contentId: record.contentId, typeId: record.typeId, yesFlag: 1 })
                if (res.code === 0) {
                  React.$message({
                    type: 'success',
                    content: '删除成功'
                  })
                  if (dataSource.length === 1 && pageNo !== 1) { this.pageChange(pageNo - 1, pageSize) } else {
                    this.pageChange(pageNo, pageSize)
                  }
                }
              }
            })
          }
        }
      }
    })
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, searchOption, } = this.state;
    return (<div className='p-layout-box'>
      <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
      <div className='right_btn'>
        <TheButton haspermi={['questions:content:create']} size="middle" type="primary" onClick={() => this.createOrEdit("add", null)} >新增</TheButton>
      </div>
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} />
      <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
    </div>)
  }
}

export default QuestionsContent